<template>
  <div>
    <transition name="el-zoom-in-top">
      <div class="user_lump">
        <el-form ref="form" :model="form" label-width="100px">
          <el-form-item>
            <div
              class="pic_box"
              @mouseenter="showState = true"
              @mouseleave="showState = false"
            >
              <el-upload
                class="avatar-uploader"
                action="#"
                :show-file-list="false"
                :before-upload="beforeAvatarUpload"
                :http-request="uploadImg"
              >
                <img class="avatar" />
                <i class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
              <p class="icon-msg" v-if="showState">编辑</p>
              <img v-if="form.userPic" :src="form.userPic" />
              <img v-else src="@/assets/pic.png" />
            </div>
          </el-form-item>
          <el-form-item label="用户名" prop="userName">
            <el-input
              v-model="form.userName"
              placeholder="请输入用户名"
            ></el-input>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input
              placeholder="请输入手机号"
              v-model="form.userMobile"
            ></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-select v-model="form.userSex" placeholder="请选择性别">
              <el-option label="女" value="0"></el-option>
              <el-option label="男" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input v-model="form.email" placeholder="请输入邮箱"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" :loading="loading" @click="onSubmit"
              >保存</el-button
            >
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
      </div>
      >
    </transition>
    <!-- <transition name="el-zoom-in-top">
      <div class="transition-box">
        <div class="fromDiv">
          <div class="user_lump">
            <div class="from_lump">
              <el-form
                ref="form"
                :model="form"
                :rules="rules"
                label-width="120px"
              >
                <el-col :span="24">
                  <el-form-item>
                    <div
                      class="pic_box"
                      @mouseenter="showState = true"
                      @mouseleave="showState = false"
                    >
                      <el-upload
                        class="avatar-uploader"
                        action="#"
                        :show-file-list="false"
                        :before-upload="beforeAvatarUpload"
                        :http-request="uploadImg"
                      >
                        <img class="avatar" />
                        <i class="el-icon-plus avatar-uploader-icon"></i>
                      </el-upload>
                      <p v-if="showState">编辑</p>
                      <img v-if="form.userPic" :src="form.userPic" />
                      <img v-else src="@/assets/images/pic.png" />
                    </div>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="用户名" prop="userName">
                    <el-input
                      v-model="form.userName"
                      placeholder="请输入用户名"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="手机号">
                    <el-input
                      placeholder="请输入手机号"
                      v-model="form.userMobile"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="性别">
                    <el-select v-model="form.userSex" placeholder="请选择性别">
                      <el-option label="女" value="0"></el-option>
                      <el-option label="男" value="1"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="类别">
                    <el-select
                      v-model="form.userType"
                      :disabled="true"
                      placeholder="请选择类别"
                    >
                      <el-option
                        v-for="option in userTypeOption"
                        :key="option.value"
                        :label="option.label"
                        :value="option.value"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="邮箱">
                    <el-input
                      v-model="form.email"
                      placeholder="请输入邮箱"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item class="btn_box">
                    <el-button
                      @click="onSubmit"
                      type="primary"
                      :loading="loading"
                      >保存</el-button
                    >
                    <el-button @click="goBack">取消</el-button>
                  </el-form-item>
                </el-col>
                <p style="clear: both"></p>
              </el-form>
            </div>
          </div>
        </div>
      </div>
    </transition> -->
  </div>
</template>

<script>
import Editor from "../../components/Editor.vue";
export default {
  components: {
    Editor
  },
  data() {
    return {
      showState: true,
      loading: false,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
        content: "",
        userId: "", //用户id
        userPic: "",
        userName: "", //用户名
        userMobile: "", //手机号
        userSex: "", //性别
        email: "", //邮箱
        userType: "" //用户类型
      }
    };
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    },
    beforeAvatarUpload(file) {
      console.log("---file", file);
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 4;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
        return;
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 4MB!");
        return;
      }
      this.file = file;
      return isJPG && isLt2M;
    },
    //上传图片
    uploadImg() {
      //   let that = this;
      //   console.log("---file", this.file);
      //   var formData = new FormData();
      //   formData.append("file", this.file);
      //   let data = formData;
      //   that.$http.post(uploadFileApi.uploadFile, data).then((res) => {
      //     if (res.status == 200) {
      //       that.form.userPic = res.data.data.fileURL;
      //     }
      //   });
    }
  }
};
</script>

<style lang="less" scoped>
.user_lump {
  background: #ffffff;
}
.pic_box {
  position: relative;
  margin: 10px auto;
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 50%;
  overflow: hidden;
}
.pic_box img {
  width: 100%;
  height: 100%;
}
.pic_box p.icon-msg {
  position: absolute;
  top: -18px;
  width: 100px;
  height: 100px;
  font-size: 18px;
  color: #ffffff;
  text-align: center;
  line-height: 100px;
  background: rgba(0, 0, 0, 0.6);
  cursor: pointer;
  letter-spacing: 2px;
  transition: all 2s;
}
.avatar-uploader {
  position: absolute;
  z-index: 888;
  opacity: 0;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  background-color: pink;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
</style>
